<template>
  <f7-page>
    <f7-navbar :title="$t('m.currencyExchange')" back-link=" ">
      <f7-nav-right>
        <f7-link class="txt-button" href="/bb-exchange-record/">{{$t('m.exchangeRecord')}}</f7-link>
      </f7-nav-right>
    </f7-navbar>

    <div class="content-padding">
      <f7-list>
        <f7-list-item :title="$t('m.paymentCurrency')" after="USDT" link smart-select :smart-select-params="smartSelectParams">
          <select name="bi-list">
            <option value="USDT" selected>USDT</option>
          </select>
        </f7-list-item>
        <f7-list-item :title="$t('m.tabs.availableBalance')" :after="$store.getters.currencyInfo[0].num"></f7-list-item>
      </f7-list>
<!--      <p>当前价值：1FIRMA≈$0.00000000</p>-->
      <f7-list style="margin-top: 25px">
        <f7-list-item :title="$t('m.targetCurrency')" after="ZOL" link smart-select :smart-select-params="smartSelectParams">
          <select name="bi-list2">
            <option value="ZOL" selected>ZOL</option>
          </select>
        </f7-list-item>
      </f7-list>
      <p>{{$t('m.currencyValue')}}：1ZOL≈${{$store.getters.currencyInfo[1].price || '0.00'}}</p>
      <f7-list style="margin-top: 25px" class="line-input-f7-list-item">
        <f7-list-item :title="$t('m.exchangeNumber')">
          <input type="number" :placeholder="$t('m.exchangeNumberPlaceholder')" slot="after" v-model="exchangeFormItems.num">
        </f7-list-item>
      </f7-list>
      <p class="fee-p">{{$t('m.handlingFee')}} <span>{{getFee}}</span> USDT</p>

      <f7-button fill large color="blue" @click="showDialog = true">{{$t('m.exchange')}}</f7-button>
    </div>


    <van-dialog
      v-model="showDialog"
      :title="$t('m.dialog.title')"
      show-cancel-button
      @confirm="handleExchange"
      slot="fixed"
    >
      <div class="confirm-box">
        <p>{{$t('m.dialogLine1')}} <span>{{exchangeFormItems.num}}USDT</span></p>
        <img src="../static/exchange-icon.png" alt="">
        <p>{{$t('m.exchangeTo')}} <span>{{exchangeNum}}ZOL</span></p>

        <custom-input type="password" :placeholder="$t('m.transactionPwdPlaceholder')" v-model="exchangeFormItems.pwd"></custom-input>
      </div>
    </van-dialog>
  </f7-page>
</template>

<script>
  import { runProjectTrans } from "../api/my";

  export default {
    name: "bb-exchange",
    data () {
      return {
        smartSelectParams: {pageBackLinkText: ' '},
        exchangeFormItems: {
          num: '',
          pwd: ''
        },
        num: '',
        showDialog: false
      }
    },
    computed: {
      getFee() {
        return (this.exchangeFormItems.num * this.$store.getters.config.config.project_trans_fee).toFixed(4);
      },
      exchangeNum() {
        return (this.exchangeFormItems.num / this.$store.getters.currencyInfo[1].price).toFixed(4);
      }
    },
    methods: {
      handleExchange() {
        runProjectTrans(this.exchangeFormItems).then(() => {
          // this.$f7router.back();
          this.exchangeFormItems.pwd = '';
          this.$f7router.navigate('/bb-exchange-record/');
        })
      }
    },
  }
</script>

<style scoped lang="scss">
  .content-padding {
    margin-top: $padding20;
    p {
      color: $mainColor;
      padding: $padding20;
    }
    .fee-p {
      color: $colorGrey;
      text-align: right;
      span {
        color: $mainColor;
      }
    }
    .button {
      margin-top: 50px;
    }
  }
  .confirm-box {
    padding: $padding20 $padding;
    text-align: right;
    p {
      display: flex;
      justify-content: space-between;
      font-size: 28px;
      color: $mainColor2;
    }
    img {
      width: 40px;
      margin: 10px 0;
    }
    .custom-input {
      margin-top: $padding;
    }
  }
</style>
